<template>
	<div class="MyWorks">
		<HeaderTab>
			<div slot="left">
				<router-link to="/mine" class="glyphicon glyphicon-menu-left return_but"></router-link>
			</div>
			<div slot="center" class="header_center">
				我的作品
			</div>
		</HeaderTab>
		<div class="MyWorks_box">
			<div class="MyWorks_Tab">
				<ul>
					<li class="MyWorks_addactive">已审核作品</li>
					<li>未审核作品</li>
				</ul>
			</div>
			<div class="MyWorks_itembox">
				<MyWorksEntry v-for="(item,index) in MyWorksEntry_data" :key="index" :MyWorksEntry_items="item"></MyWorksEntry>
				<div class="text_tip">---------------已经到底了---------------</div>
			</div>
		</div>
	</div>	
</template>

<script>
	import HeaderTab from 'common/HeaderTab/HeaderTab.vue'
	import MyWorksEntry from 'views/DetailsPage/Mine/MyWorksEntry'
	
	export default {
		name: 'MyWorks',
		components: {
			HeaderTab,
			MyWorksEntry
		},
		methods: {
			MyWorks_clickStyle() {
				let mwbox = document.getElementsByClassName('MyWorks_Tab')[0];
				let nextmwli = mwbox.getElementsByTagName('li');
				
				for (let i = 0; i < nextmwli.length; i++) {
					nextmwli[i].onclick = function() {
						for (let j = 0; j < nextmwli.length; j++) {
							nextmwli[j].className = '';
						}
						this.className = 'MyWorks_addactive';
					}
				}
			}
		},
		mounted() {
			this.MyWorks_clickStyle()
		}
	}
</script>

<style>
	
	.MyWorks_box{
		margin-top: 40px;
	}
	.MyWorks_Tab{
		position: fixed;
		top: 40px;
		left: 0;
		right: 0;
	}
	.MyWorks_Tab ul{
		width: 100%;
		padding-left: 0;
	}
	.MyWorks_Tab li{
		width: 50%;
		list-style: none;
		float: left;
		text-align: center;
		height: 40px;
		line-height: 40px;
		background: rgb(240,240,240);
	}
	.MyWorks_itembox{
		margin-top: 90px;
	}
	.MyWorks_addactive{
		border-bottom: rgb(0,164,180) 3px solid;
		color: rgb(0,164,180);
	}
	.text_tip{
		width: 100%;
		height: 10px;
		/* background: #ADADAD; */
		margin-bottom: 50px;
		margin-top: 20px;
		font-size: 17px;
		text-align: center;
	}
</style>
